<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>
<!-- 企业全部客户 -->
<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="customer-list">
        <div class="header">
            <div class="back">返回</div>
            <div class="type_select_wrapper">企业全部客户</div>
        </div>
        <div class="container">
            <div class="screen_wrapper">
                <div class="screen_item logo_wrapper">
                    <span class="text">标签：</span>
                    <div class="select_style logo_select_div">不限</div>
                </div>
                <div class="screen_item add_person_wrapper">
                    <span class="text">添加人：</span>
                    <div class="select_style add_person_select_div">全部</div>
                </div>
                <div class="screen_item time_select_wrapper">
                    <span class="text">时间：</span>
                    <div class="time_wrapper">
                        <input class="layui-input" type="text" placeholder="开始时间" id="startDate">
                        <span class="text units">至</span>
                        <input class="layui-input" type="text" placeholder="结束时间" id="endDate">
                    </div>
                </div>
            </div>
            <!-- 客户列表 -->
            <div class="logo_cus_wrapper">
                <div class="table_header">
                    <span class="cus_num">共5个客户</span>
                    <a href="javascript:;" class="exporting_table">导出客户列表</a>
                </div>
                <table class="layui-table customer_table" style="table-layout:fixed">
                    <thead>
                        <tr>
                            <th>客户名称</th>
                            <th class="logos">标签</th>
                            <th>添加时间</th>
                            <th>添加人</th>
                            <th>企业名称</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-id="LiuYiHua">
                            <td>刘毅华</td>
                            <td class="logos">
                                <div class="logo_item">一般</div>
                                <div class="logo_item">重要</div>
                            </td>
                            <td>02月16日</td>
                            <td>叶铠齐</td>
                            <td>长沙峰之道</td>
                        </tr>
                        <tr data-id="ZhaoHongRui">
                            <td>赵虹蕊</td>
                            <td class="logos"></td>
                            <td>02月16日</td>
                            <td>刘毅华</td>
                            <td>长沙峰之道</td>
                        </tr>
                        <tr data-id="LvHaiYang">
                            <td>吕海洋</td>
                            <td class="logos">
                                <div class="logo_item">核心</div>
                            </td>
                            <td>2019年02月16日</td>
                            <td>赵虹蕊</td>
                            <td>长沙峰之道</td>
                        </tr>
                    </tbody>
                </table>
                <div class="paging_style" id="paging"></div>
            </div>
        </div>
    </div>

    <!-- 选择标签模态框 -->
    <div class="modal fade normal-modal" id="select_logo_modal" tabindex="-1" role="dialog"
        aria-labelledby="select_logo_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="select_logo_modal_label">选择标签</h4>
                    </div>
                    <div class="modal-body">
                        <div class="select_logos_wrapper">
                            <div class="logo_group_item">
                                <div class="group_name">客户等级</div>
                                <div class="logo_item">
                                    <input class="item" type="checkbox" lay-filter="logo_select" lay-skin="primary"
                                        name="logo" value="1" title="一般">
                                    <input class="item" type="checkbox" lay-filter="logo_select" lay-skin="primary"
                                        name="logo" value="2" title="重要">
                                    <input class="item" type="checkbox" lay-filter="logo_select" lay-skin="primary"
                                        name="logo" value="3" title="核心">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="clear_all_selected_logo" style="display: none;">清除选中标签</div>
                        <div class="btn_wrapper">
                            <button type="button" class="btn danger-bg" id="submit_select_logos">确定</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 选择标签模态框 -->

    <!-- 添加人模态框 -->
    <div class="modal fade" id="addperson_modal" tabindex="-1" role="dialog" aria-labelledby="addperson_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addperson_modal_label">选择添加人</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="protree_container"></div>
                        </div>
                        <div class="right_wrapper">
                            <div class="title">已选择的部门或成员</div>
                            <div class="selected">
                                <div class="department_members selected_members" id="selected_members">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submit_dep_member">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加人模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <script>
        // 2020-02-19 start
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }
        let member_id = getUrlParam('id'); // 拿到接收到的成员id
        let pageUrl = getUrlParam('page') == null ? 'data-statistics' : getUrlParam('page'); // 拿到接收到的page页面地址
        let nav_index = getUrlParam('nav_index') // 拿到接收到的父级页面tab选项卡选中的index项
        // 2020-02-19 end
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true,
                useful: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true,
                useful: true
            },
            {
                id: 10,
                name: '子公司',
                pid: 1,
                department: true,
                useful: true
            },
            {
                id: "LiuYiHua",
                name: "刘毅华",
                pid: 1,
                department: false,
                useful: true
            },
            {
                id: "YeKaiQi",
                name: "叶铠齐",
                pid: 1,
                department: false,
                useful: true
            },
            {
                id: "LiangXiaoLing",
                name: "梁小玲",
                pid: 1,
                department: false,
                useful: true
            },
            {
                id: "WuFang",
                name: "吴访",
                pid: 10,
                department: false,
                useful: true
            },
            {
                id: "ZhaoHongRui",
                name: "赵虹蕊",
                pid: 2,
                department: false,
                useful: true
            },
            {
                id: "LvHaiYang",
                name: "吕海洋",
                pid: 2,
                department: false,
                useful: true
            },
            {
                id: "ZengHongYun",
                name: "曾红云",
                pid: 2,
                department: false,
                useful: true
            }
        ];
        // 获取当前日期
        function getDate() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            let month = "";
            let day = "";
            if (mydate.getMonth() < 10) {
                month = "0" + (mydate.getMonth() + 1);
            } else {
                month = mydate.getMonth() + 1;
            }
            if (mydate.getDate() < 10) {
                day = "0" + mydate.getDate();
            } else {
                day = mydate.getDate();
            }
            str += month + "-";
            str += day;
            return str;
        }
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer;
                var todayDate = getDate() // 当前日期
                var startDateSelected = "" // 开始日期 默认为空
                var endDateSelected = todayDate // 结束日期 默认当天日期
                // 返回
                $(".back").click(function () {
                    if (pageUrl != 'data-statistics') {
                        self.location.href = pageUrl + ".html?nav_index=" + nav_index
                    } else {
                        parent.location.href = pageUrl + ".html?nav_index=" + nav_index
                    }
                })
                // 表格分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                });
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    // 开始日期
                    let startDateValue = laydate.render({
                        elem: '#startDate', //指定元素
                        value: "",
                        max: todayDate,
                        done: function (value, date) {
                            startDateSelected = value;
                            // 执行ajax 重新加载table数据
                        }
                    });
                    // 结束日期
                    let endDateValue = laydate.render({
                        elem: '#endDate', //指定元素
                        value: todayDate,
                        max: todayDate,
                        done: function (value, date) {
                            endDateSelected = value;
                            startDateValue.config.max = {
                                year: date.year,
                                month: date.month - 1,
                                date: date.date
                            }
                            // 执行ajax 重新加载table数据
                        }
                    });
                })

                let memberSelected = []; // 选择的成员
                // 点击 成员部门 打开添加模态框 且 重新加载已选择的成员
                $(".add_person_select_div").click(function () {
                    $("#addperson_modal").modal("show");
                    let html2 = "";
                    for (let j = 0; j < memberSelected.length; j++) {
                        html2 += `
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${memberSelected[j].id}" data-pid="${memberSelected[j].pid}" data-dep="${memberSelected[j].department}" data-useful="${memberSelected[j].useful}">${memberSelected[j].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `;
                    }
                    $("#selected_members").html(html2);
                });
                //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
                $(".protree_container").ProTree({
                    arr: arr,
                    close: true,
                    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                    callback: function (id, name, pid, department, useful) {
                        if (useful) {
                            let data = {
                                id,
                                name,
                                pid,
                                department,
                                useful
                            };
                            let isAdd = true;
                            if (memberSelected.length > 0) {
                                for (let i = 0; i < memberSelected.length; i++) {
                                    if (memberSelected[i].name == data.name) {
                                        isAdd = false
                                        layer.msg('已经选过此成员了')
                                        break
                                    }
                                }
                            }
                            if (department == "false") {
                                if (isAdd) {
                                    memberSelected.push(data);
                                    $("#selected_members").append(`
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-useful="${data.useful}">${data.name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                                }
                            }
                        }

                    }
                });
                // 删除部门、成员
                $(".department_members").on("click", ".delete_dep_mem", function () {
                    let id = $(this)
                        .siblings("span")
                        .attr("data-id");
                    let dep = $(this)
                        .siblings("span")
                        .attr("data-dep");
                    $(this)
                        .parent()
                        .remove();
                    if (dep == "false") {
                        for (let i = 0; i < memberSelected.length; i++) {
                            if (id == memberSelected[i].id) {
                                memberSelected.splice(i, 1);
                                break;
                            }
                        }
                    }
                });
                // 拿到需要发送的部门、成员列表
                $("#submit_dep_member").click(function () {
                    totalDatalist = memberSelected;
                    let member_depart_select = ""
                    for (let i = 0; i < totalDatalist.length; i++) {
                        member_depart_select += `${totalDatalist[i].name},`
                    }
                    member_depart_select = member_depart_select.substring(0, member_depart_select.length - 1)
                    console.log(member_depart_select)
                    if (member_depart_select == '') {
                        $(".add_person_select_div").text('全部')
                    } else {
                        $(".add_person_select_div").text(member_depart_select)
                        $(".add_person_select_div").attr('title', member_depart_select)
                    }
                    console.log('memberSelected', totalDatalist) // 拿到选好的数据
                    // 执行ajax请求 重新加载table数据
                    $("#addperson_modal").modal("hide");
                });

                // 打开标签模态框
                $(".logo_select_div").click(function () {
                    $("#select_logo_modal").modal('show')
                })
                // 监听 logo标签选择
                let selected_logo_list = []
                form.on('checkbox(logo_select)', function (data) {
                    let selected = {
                        id: data.value,
                        name: data.elem.title
                    }
                    if (data.elem.checked == true) {
                        selected_logo_list.push(selected)
                    } else {
                        for (let i = 0; i < selected_logo_list.length; i++) {
                            if (selected_logo_list[i].id == data.value) {
                                selected_logo_list.splice(i, 1)
                            }
                        }
                    }
                    if (selected_logo_list.length > 0) {
                        $(".clear_all_selected_logo").show()
                    } else {
                        $(".clear_all_selected_logo").hide()
                    }
                })

                // logo标签选择确认
                $("#submit_select_logos").click(function () {
                    console.log(selected_logo_list) // selected_logo_list 为已选择的标签id数组
                    // 执行ajax操作

                    // 控制标签的显示
                    let html = "";
                    for (let i = 0; i < selected_logo_list.length; i++) {
                        html += `${selected_logo_list[i].name},`
                    }
                    html = html.substring(0, html.length - 1)
                    if (html == '') {
                        $(".logo_select_div").text('不限')
                    } else {
                        $(".logo_select_div").text(html)
                        $(".logo_select_div").attr('title', html)
                    }
                    $("#select_logo_modal").modal('hide')
                })

                // 清除所选的标签
                $(".clear_all_selected_logo").click(function () {
                    $("input[name=logo]").each(function () {
                        if ($(this).prop('checked') == true) {
                            $(this).prop('checked', false)
                        }
                        form.render('checkbox')
                    })
                    selected_logo_list = []
                })

                // 2020-02-18 start
                // 点击table内的客户跳转至客户详情
                $(".customer_table").on('click', 'tbody tr', function () {
                    let cus_id = $(this).attr('data-id'); // 客户id
                    self.location.href = "customer-detail.html?id=" + cus_id + '&page=customer-list&nav_index=3'
                })
                // 2020-02-18 end
            })
        })

    </script>
</body>

</html>